<template>
  <div style="height: 100%">
    <el-form class="query-form" :inline="true" :model="formQuery">
      <el-col :span="4">
        <el-form-item>
          <el-select type="medium" clearable placeholder="工单类型" v-model="formQuery.fkWorkOrderTypeId">
            <el-option v-for="item in workOrderType" :key="item.pkBasicdataId" :value="item.pkBasicdataId"
              :label="item.itemName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item>
          <el-select clearable placeholder="工单状态" v-model="formQuery.workOrderStatus">
            <el-option value="0" label="待处理"></el-option>
            <el-option value="1" label="已处理"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-form-item>
        <el-button @click="query">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="div-table" style="padding:0 20px;">
        <el-scrollbar style="height:100%;">
            <el-table ref="multipleTable" class="roomTable" :data="tableData" style="width: 100%">
                <el-table-column type="selection">
                </el-table-column>
                <el-table-column type="index" label="序号" width="70"></el-table-column>
                <el-table-column show-overflow-tooltip prop="creationDate" label="提交时间"></el-table-column>
                <el-table-column show-overflow-tooltip prop="typeName" label="工单类型"></el-table-column>
                <el-table-column show-overflow-tooltip prop="submitter" label="提交人"></el-table-column>
                <el-table-column show-overflow-tooltip prop="submitterContactInformation" label="提交人联系方式"></el-table-column>
                <el-table-column show-overflow-tooltip prop="workOrderContent" label="工单内容"></el-table-column>
                <el-table-column show-overflow-tooltip prop="workOrderStatus" label="工单状态">
                <template slot-scope="{row}">
                    {{ row.workOrderStatus | workOrderStatusFilter }}
                </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="processingTime" label="处理时间"></el-table-column>
                <el-table-column show-overflow-tooltip prop="handler" label="处理人"></el-table-column>
                <el-table-column show-overflow-tooltip prop="handlerContactInformation" label="处理人联系方式"></el-table-column>
                <el-table-column show-overflow-tooltip prop="processingResults" label="处理结果"></el-table-column>
                <el-table-column label="操作" align="center" header-align="center">
                <template slot-scope="{row}">
                    <!-- 待处理 -->
                    <template v-if="row.workOrderStatus=='0'">
                    <router-link class="el-link el-link--primary" :to="'./edit?id='+row.pkWorkOrderId+'&update=true'">
                        处理工单
                    </router-link>
                    </template>
                    <!-- 已处理 -->
                    <template>
                    <router-link class="el-link el-link--primary" :to="'./edit?id='+row.pkWorkOrderId">
                        工单详情
                    </router-link>
                    </template>
                </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>
    </div>
    <div class="page-div-placeholder"></div>
    <div class="page-div" style="background:#fff;">
      <el-pagination layout="prev, pager, next,jumper,sizes" :current-page="pageObj.page" :page-size="pageObj.pageSize"
        :total="pageObj.total" @current-change="currentPageChange" @size-change="sizeChange" :page-sizes='pageObj.pageSizes'>
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { selectNameToId, getOneAll } from "@/api/common/common.js"
  import { getAllByPage, getAllByCondition } from "@/api/operations/workOrder"
  import { listMixin } from "@/mixin"
  export default {
    mixins: [listMixin],
    data() {
      return {
        workOrderType: [],
        formQuery: {},
        tableData: [],
      };
    },
    methods: {
      loadData() {
        if (this.where) {
          return getAllByCondition(this.where).then(res => {
            let { data, total } = res;
            this.tableData = data;
            this.pageObj.total = total;
          });
        } else {
          return getAllByPage(this.pageObj).then(res => {
            let { data, total } = res;
            this.tableData = data;
            this.pageObj.total = total;
          });
        }
      }
    },
    mounted() {
      this.loadDataProxy();
      getOneAll(selectNameToId("workOrder")).then(res => {
        this.workOrderType = res.data;
      });
    },
  };
</script>
